<template>
  <div class="wrap">
    <div class="top-banner"></div>
    <div class="container">
      <div class="step">
        <router-link to="/holdall"><span class="active">工具箱</span></router-link>
        &nbsp;&nbsp;<span>/</span>&nbsp;&nbsp;<router-link to="/wuXing_input"><span>五行字典</span></router-link>
      </div>
      <tips></tips>
      <div class="c-content">
        <div style="max-width: 600px;margin: auto;">
          <el-row>
            <el-form :model="ruleForm"
                     class="userSignForm demo-ruleForm"
                     ref="ruleForm"
                     :rules="rules"
                     :label-width="lWidth"
                     :label-position="labelPosition">
              <el-row :gutter="20">
                <el-col :span="24"
                        :sm="11">
                  <el-form-item label="姓"
                                prop="firstName"
                                required>
                    <el-input class="len input w-100"
                              placeholder="请输入姓"
                              v-model.trim="ruleForm.firstName"
                              type="text"
                              autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24"
                        :sm="12">
                  <el-form-item prop="sex"
                                label="性别"
                                required
                                label-width="4em">
                    <el-select placeholder="请选择"
                               v-model="ruleForm.sex"
                               class="input w-100">
                      <el-option v-for="item in sexArr"
                                 :key="item.value"
                                 :label="item.label"
                                 :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item prop="num"
                                label="字数">
                    <el-select placeholder="请选择"
                               class="w-100"
                               v-model="ruleForm.count"
                               style="width: 64%;"
                               @change="select">
                      <el-option label="两个字"
                                 value="2">
                      </el-option>
                      <el-option label="三个字"
                                 value="3">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item prop="datas"
                                label="出生日期">
                    <el-select placeholder="请选择"
                               style="margin-right:10px;"
                               class="w-100 w-202"
                               v-model="ruleForm.timeType">
                      <el-option v-for="item in timeType"
                                 :key="item.value"
                                 :label="item.label"
                                 :value="item.value">
                      </el-option>
                    </el-select>
                    <el-date-picker class="w-100 w-202"
                                    type="datetime"
                                    format="yyyy-MM-dd HH:mm"
                                    placeholder="选择日期时间"
                                    :editable="false"
                                    v-model="ruleForm.birthday"
                                    @change="dateChange"
                                    value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item v-if="!this.$store.state.isIos">
                    <el-input style="margin-right:10px;"
                              class="len w-100 w-202"
                              type="text"
                              disabled
                              placeholder="选择日期时间"
                              autocomplete="off"
                              v-model="disabledTimeType">
                    </el-input>
                    <el-input class="len w-100 w-202"
                              type="text"
                              disabled
                              placeholder="选择日期时间"
                              autocomplete="off"
                              v-model="ruleForm.anotherDate">
                      <i slot="prefix"
                         class="el-input__icon el-icon-time"></i></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="第二个字五行限定"
                                label-width="150px">
                    <el-checkbox-group v-model="ruleForm.wuxing">
                      <el-checkbox :label="item.label"
                                   :name="item.value"
                                   v-for="(item,index) in wuxingArr"
                                   :key="index"
                                   :disabled="item.disabled"
                                   @change="check"
                                   :true-label="index"
                                   :false-label="index"></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="ruleForm.count!=2">
                <el-col :span="24">
                  <el-form-item label="第三个字五行限定"
                                label-width="150px">
                    <el-checkbox-group v-model="ruleForm.wuxing1">
                      <el-checkbox :label="item.label"
                                   :name="item.value"
                                   v-for="(item,index) in wuxingArr1"
                                   :key="index"
                                   :disabled="item.disabled"
                                   @change="check1"
                                   :true-label="index"
                                   :false-label="index"></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="固定字"
                                prop="fix">
                    <el-input autocomplete="off"
                              v-model="ruleForm.fix"
                              style="margin-right:10px;width:80px;"
                              placeholder="请输入"></el-input>
                    <el-select placeholder="固定字位置"
                               v-model="ruleForm.fixLocal"
                               style="margin-right:10px;width:8em;">
                      <el-option label="没有要求"
                                 value="0">
                      </el-option>
                      <el-option label="固定中间"
                                 value="1"
                                 :disabled="ruleForm.count==2">
                      </el-option>
                      <el-option label="固定末尾"
                                 value="2">
                      </el-option>
                    </el-select>
                    <el-button type="primary"
                               plain
                               @click="detection"
                               :disabled="!ruleForm.fix">检测</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item>
                    <span v-if="msg!='1'">检测结果：<span style="color: red;">“{{msg}}”</span>{{flag?'可以使用。':'不可以使用。'}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item>
                <div class="b">
                  <div class="sumbit-btn"
                       @click="submitForm">
                    提 交
                  </div>
                  <vip-count></vip-count>
                </div>
              </el-form-item>
            </el-form>
          </el-row>
        </div>
      </div>
    </div>
		<clientBtn></clientBtn>
  </div>
</template>

<script>
// import area from "@/util/area.json";
import calendar from "../sign/lib/timer.js";
import clientBtn from '../../components/clientBtn'
export default {
  components: {
    clientBtn
  },
  data () {
    var firstName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入姓!'));
      }
      if ((value != '' && value.length != 1) || !/^[\u4e00-\u9fa5]+$/.test(value)) {
        callback(new Error('只能输入1个汉字!'));
      } else {
        callback();
      }
    };
    var sex = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择性别!'));
      } else {
        callback();
      }
    };

    var birthday = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('请选择小孩生日!'));
      } else {
        callback();
      }
    };
    var fix = (rule, value, callback) => {
      if ((value == '' && value.length >= 1) || (value != '' & !/^[\u4e00-\u9fa5]+$/.test(value))) {
        callback(new Error('只能输入1个汉字!'));
      } else {
        callback();
      }
    }
    return {
      isForeign: false, // 是否外国
      // 出生时间选择公历还是农历
      timeType: [{
        value: 1,
        label: "公历"
      },
      {
        value: 0,
        label: "农历"
      },
      ],

      // 国家列表
      countryList: [],
      // 省份列表
      provinceList: [],
      // 城市列表
      cityList: [],
      sexArr: [
        {
          label: "男",
          value: 1
        },
        {
          label: "女",
          value: 0
        }
      ],
      wuxingArr: [
        {
          label: "金",
          value: "金",
          disabled: false,
          checked: false
        },
        {
          label: "木",
          value: "木",
          disabled: false,
          checked: false
        },
        {
          label: "水",
          value: "水",
          disabled: false,
          checked: false
        },
        {
          label: "火",
          value: "火",
          disabled: false,
          checked: false
        },
        {
          label: "土",
          value: "土",
          disabled: false,
          checked: false
        },
        {
          label: "不限定",
          value: "",
          disabled: false,
          checked: false
        }
      ],
      flag: false,//检测是否可用
      msg: "1",//可用信息
      wuxingArr1: [
        {
          label: "金",
          value: "金",
          disabled: false,
          checked: false
        },
        {
          label: "木",
          value: "木",
          disabled: false,
          checked: false
        },
        {
          label: "水",
          value: "水",
          disabled: false,
          checked: false
        },
        {
          label: "火",
          value: "火",
          disabled: false,
          checked: false
        },
        {
          label: "土",
          value: "土",
          disabled: false,
          checked: false
        },
        {
          label: "不限定",
          value: "",
          disabled: false,
          checked: false
        }
      ],
      ruleForm: {
        firstName: '', // 姓氏
        sex: "", // 0-女，1-男，3-未知,
        count: "3", // 名字字符个数
        wuxing: [],//第二个字五行限定
        wuxing1: [],//第三个字五行限定["金","木","金"]
        fix: '', // 姓名中的某个固定的字
        fixLocal: '0', // 固定字的位置，0-没有要求，1-固定中间，2-固定最后
        timeType: 1, // 1-公历，0-农历
        anotherDate: '', // 另一个日期
        birthday: ""//出生日期
      },
      lWidth: "120px",
      labelPosition: "right",
      rules: {
        firstName: [{
          validator: firstName,
          trigger: 'blur'
        },],
        birthday: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        sex: [{
          validator: sex,
          trigger: ['blur', 'change']
        },],
        fix: [{
          message: '请输入固定字',
          trigger: 'blur'
        },]
      }
    }
  },
  computed: {
    disabledTimeType () {
      if (this.ruleForm.timeType == 1) return '农历';
      else return '公历';
    },
    nongli () {
      let nows = new Date(this.ruleForm.bornTime);
      let Y = nows.getFullYear() + '-';
      let M = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1) + '-';
      let Ys = nows.getFullYear();
      let Ms = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1);
      let D = nows.getDate();
      let h = nows.getHours();
      let m = nows.getMinutes();
      let s = nows.getSeconds();
      let timers = Y + M + D;
      var timer = this.getLunarDate(timers);

      // var nongli = this.toSolar(Y,M,D)
      if (this.ruleForm.datas == 1) {
        //return "农历  " +  timer.lunarYear + '-' + timer.lunarMonth + '-' + timer.lunarDay+" "+h+":"+m+":"+s;
        return "农历  ";
      } else {
        var aaa = calendar.lunar2solar(Ys, Ms, D);
        //return "公历  " + aaa.cYear + '-'+ aaa.cMonth + '-' + aaa.cDay+" "+h+":"+m+":"+s;
        return "公历  ";
        // return nongli[0] + '-' + nongli[1] + '-' + nongli[2]+" "+h+":"+m+":"+s;
      }

    },
    gongli () {
      let nows = new Date(this.ruleForm.birthday);
      let Y = nows.getFullYear() + '-';
      let M = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1) + '-';
      let Ys = nows.getFullYear();
      let Ms = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1);
      let D = nows.getDate();
      let h = nows.getHours();
      let m = nows.getMinutes();
      let s = nows.getSeconds();
      let timers = Y + M + D;
      return ''
    },
    texts () {
      if (this.ruleForm.datas == 1) {
        return "公历/农历"
      } else {
        return "农历/公历"
      }
    },
    isReverse () {
      if (this.ruleForm.datas == 1) {
        return false
      } else {
        return true
      }
    }
  },
  mounted () {
    let w = window.innerWidth
    if (w > 450) {
      this.labelPosition = "right"
      this.lWidth = "150px"
    } else {
      this.labelPosition = "top"
      this.lWidth = "6em"
    }
  },
  created () {
    let wuxing_page_info = localStorage.getItem("wuxing_page_info");
    if (wuxing_page_info) {
      localStorage.removeItem("wuxing_page_info");
      wuxing_page_info = JSON.parse(wuxing_page_info)
      this.ruleForm = wuxing_page_info;
    }
    // this.getCountryList();
	},
	mounted () {
    _MEIQIA('hidePanel');
  },
  methods: {

    select () {
      this.ruleForm.fixLocal = "0"
    },
    // 检测
    detection () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (this.ruleForm.count != 2) {
            if (this.ruleForm.wuxing.length == 0) {
              this.$message.error("第二个字五行限定至少选择一个！");
              return
            }
            if (this.ruleForm.wuxing1.length == 0) {
              this.$message.error("第三个字五行限定至少选择一个！");
              return
            }
          } else {
            if (this.ruleForm.wuxing.length == 0) {
              this.$message.error("第二个字五行限定至少选择一个！");
              return
            }
          }
          let wuxing = this.ruleForm.wuxing
          if (this.ruleForm.fixLocal != 1) {
            wuxing = wuxing.concat(this.ruleForm.wuxing1)
            for (let i in wuxing) {
              if (wuxing[i] == "不限定") {
                wuxing.splice(i, 1, "金", "木", "水", "火", "土");
              }
            }
          }
          for (let i in wuxing) {
            if (wuxing[i] == "不限定") {
              wuxing.splice(i, 1, "金", "木", "水", "火", "土");
            }
          }

          let data = {
            word: this.ruleForm.fix,
            wuxing: wuxing
          }
          this.$ajax
            .post("/util/checkWuXing", data)
            .then(res => {
              if (res.data.code == 0) {
                console.log(res.data.data)
                this.flag = res.data.data
                this.msg = this.ruleForm.fix

              } else { this.$message.error(res.data.msg) };
            });
        }
      });

    },
    // 第二个字五行限定
    check (e) {
      this.wuxingArr[e].checked = !this.wuxingArr[e].checked
      this.wuxingType()
      if (e == 5 && this.wuxingArr[e].checked) {
        for (var i = 0; i < this.wuxingArr.length - 1; i++) {
          this.wuxingArr[i].disabled = true
        }
        this.wuxingArr[e].disabled = false
        return
      } else {
        for (var i = 0; i < this.wuxingArr.length; i++) {
          this.wuxingArr[i].disabled = false
          if (this.wuxingArr[i].checked) {
            this.wuxingArr[5].disabled = true
            return
          } else {
            this.wuxingArr[5].disabled = false
          }
        }
      }

    },
    wuxingType () {
      this.ruleForm.wuxing = []
      for (var i in this.wuxingArr) {
        if (this.wuxingArr[i].checked) {
          this.ruleForm.wuxing.push(this.wuxingArr[i].label)
        }
      }
    },

    // 第三个字五行限定
    check1 (e) {
      this.wuxingArr1[e].checked = !this.wuxingArr1[e].checked
      this.wuxingType1()
      if (e == 5 && this.wuxingArr1[e].checked) {
        for (var i in this.wuxingArr1) {
          this.wuxingArr1[i].disabled = true
        }
        this.wuxingArr1[e].disabled = false
        return
      } else {
        for (var i = 0; i < this.wuxingArr1.length; i++) {
          this.wuxingArr1[i].disabled = false
          if (this.wuxingArr1[i].checked) {
            this.wuxingArr1[5].disabled = true
            return
          } else {
            this.wuxingArr1[5].disabled = false
          }
        }
      }
    },
    wuxingType1 () {
      this.ruleForm.wuxing1 = []
      for (var i in this.wuxingArr1) {
        if (this.wuxingArr1[i].checked) {
          this.ruleForm.wuxing1.push(this.wuxingArr1[i].label)
        }
      }
    },
    // 提交表单
    submitForm (formName) {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (this.ruleForm.timeType == 0) {
            [this.ruleForm.birthday, this.ruleForm.anotherDate] = [this.ruleForm.anotherDate, this.ruleForm.birthday]
          }
          if (this.ruleForm.birthday == '') {
            return this.$message.error('请填写出生日期');
          }
          if (this.ruleForm.count != 2) {
            if (this.ruleForm.wuxing.length == 0) {
              this.$message.error("第二个字五行限定至少选择一个！");
              return
            }
            if (this.ruleForm.wuxing1.length == 0) {
              this.$message.error("第三个字五行限定至少选择一个！");
              return
            }
          } else {
            if (this.ruleForm.wuxing.length == 0) {
              this.$message.error("第二个字五行限定至少选择一个！");
              return
            }
          }
          // 如果没有登录，跳转登录
          if (!localStorage.getItem("key")) {
            this.$confirm('您需要登录后才能查询，是否登录后再返回此页？页面信息会保留', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => {
              // 保存本地信息
              localStorage.setItem("wuxing_page_info", JSON.stringify(this.ruleForm));
              this.$router.push({
                path: "/userlogin",
                query: {
                  jump_path: '/wuxing_input'
                }
              })
            })
            return;
          }
          if (this.$store.state.count == 0 && this.$store.state.show != true) {
            this.$confirm('您的本月免费次数已用完，请升级会员享受无限次数查询！', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => {
              // 保存本地信息
              this.$router.push({
                path: "/vip_pay"
              })
            })
            return;
          }
          this.$router.push({
            name: 'wuxing_name',
            query: this.ruleForm
          });
        } else {
          return false;
        }
      });
    },
    // 选择日期
    dateChange (val) {
      if (this.$store.state.isIos) {
        return
      }
      let nows = new Date(this.ruleForm.birthday);
      let Y = nows.getFullYear() + '-';
      let M = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1) + '-';
      let Ys = nows.getFullYear();
      let Ms = (nows.getMonth() + 1 < 10 ? '0' + (nows.getMonth() + 1) : nows.getMonth() + 1);
      let D = nows.getDate();
      let h = nows.getHours();
      let m = nows.getMinutes();
      let s = nows.getSeconds();
      let timers = Y + M + D;
      var timer = this.getLunarDate(timers);
      // var nongli = this.toSolar(Y,M,D)
      if (this.ruleForm.timeType == 1) {
        //return "公历  " +  timers+" "+h+":"+m+":"+s;
        this.ruleForm.anotherDate = timer.lunarYear + '-' + timer.lunarMonth + '-' + timer.lunarDay + " " + (h < 10 ? '0' +
          h : h) + ":" + (m < 10 ? '0' + m : m);
      } else {
        var aaa = calendar.lunar2solar(Ys, Ms, D);
        ///return "农历  " + timers+" "+h+":"+m+":"+s;
        this.ruleForm.anotherDate = aaa.cYear + '-' + aaa.cMonth + '-' + aaa.cDay + " " + (h < 10 ? '0' + h : h) + ":" + (
          m < 10 ? '0' + m : m);
        // return nongli[0] + '-' + nongli[1] + '-' + nongli[2]+" "+h+":"+m+":"+s;
      }
    },
    // 获取国家的列表
    async getCountryList () {
      let res = await this.$ajax.get("/area/getCountry");
      if (res.data.code == 0) {
        this.countryList = res.data.data;
        this.ruleForm.country = res.data.data[0].id;
        // 获取省份
        this.getProvinceList();
      }
    },
    // 获取省份列表
    async getProvinceList () {
      this.$ajax.post('/area/getProvince?countryId=' + this.ruleForm.countryId)
        .then(res => {
          if (res.data.code == 0) {
            this.ruleForm.provinceId = res.data.data[0].id;
            this.provinceList = res.data.data;
            // 获取城市
            this.getCityList();
          }
        })
    },
    // 获取城市列表
    async getCityList (val) {
      this.$ajax.post('/area/getCity?provinceId=' + this.ruleForm.provinceId)
        .then(res => {
          if (res.data.code == 0) {
            this.ruleForm.cityId = res.data.data[0].id;
            this.cityList = res.data.data;
          }

        })
    },
    // 国家选择
    selectCountryChange (val) {
      this.ruleForm.countryId = val;
      // 如果选择的是非中国国家，隐藏省份和城市select
      if (val >= 2) {
        this.isForeign = true;
        return;
      } else {
        this.isForeign = false;
      }
      this.getProvinceList();
    },
    // 省份选择
    selectProvinceChange (val) {
      this.ruleForm.provinceId = val;
      this.getCityList();
    },
    // 城市选择
    selectCityChange (val) {
      this.ruleForm.cityId = val;
    },
    getLunarDate (date) { // 阳历转农历

      var lunar = {
        tg: '甲乙丙丁戊己庚辛壬癸',
        dz: '子丑寅卯辰巳午未申酉戌亥',
        number: '一二三四五六七八九十',
        year: '鼠牛虎兔龙蛇马羊猴鸡狗猪',
        month: '正二三四五六七八九十冬腊',
        monthadd: [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334],
        calendar: [0xA4B, 0x5164B, 0x6A5, 0x6D4, 0x415B5, 0x2B6, 0x957, 0x2092F, 0x497, 0x60C96, 0xD4A, 0xEA5, 0x50DA9,
          0x5AD, 0x2B6, 0x3126E, 0x92E, 0x7192D, 0xC95, 0xD4A, 0x61B4A, 0xB55, 0x56A, 0x4155B, 0x25D, 0x92D, 0x2192B,
          0xA95, 0x71695, 0x6CA, 0xB55, 0x50AB5, 0x4DA, 0xA5B, 0x30A57, 0x52B, 0x8152A, 0xE95, 0x6AA, 0x615AA, 0xAB5,
          0x4B6, 0x414AE, 0xA57, 0x526, 0x31D26, 0xD95, 0x70B55, 0x56A, 0x96D, 0x5095D, 0x4AD, 0xA4D, 0x41A4D, 0xD25,
          0x81AA5, 0xB54, 0xB6A, 0x612DA, 0x95B, 0x49B, 0x41497, 0xA4B, 0xA164B, 0x6A5, 0x6D4, 0x615B4, 0xAB6, 0x957,
          0x5092F, 0x497, 0x64B, 0x30D4A, 0xEA5, 0x80D65, 0x5AC, 0xAB6, 0x5126D, 0x92E, 0xC96, 0x41A95, 0xD4A, 0xDA5,
          0x20B55, 0x56A, 0x7155B, 0x25D, 0x92D, 0x5192B, 0xA95, 0xB4A, 0x416AA, 0xAD5, 0x90AB5, 0x4BA, 0xA5B, 0x60A57,
          0x52B, 0xA93, 0x40E95
        ]
      }

      var year, month, day;
      if (!date) {
        date = new Date(), year = date.getFullYear(), month = date.getMonth(), day = date.getDate();
      } else {
        date = date.split('-'), year = parseInt(date[0]), month = date[1] - 1, day = parseInt(date[2]);
      }

      if (year < 1921 || year > 2020) {
        return {}
      }

      var total, m, n, k, bit, lunarYear, lunarMonth, lunarDay;
      var isEnd = false;
      var tmp = year;
      if (tmp < 1900) {
        tmp += 1900;
      }
      total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + lunar.monthadd[month] + day - 38;
      if (year % 4 == 0 && month > 1) {
        total++;
      }
      for (m = 0; ; m++) {
        k = (lunar.calendar[m] < 0xfff) ? 11 : 12;
        for (n = k; n >= 0; n--) {
          bit = (lunar.calendar[m] >> n) & 1;
          if (total <= 29 + bit) {
            isEnd = true;
            break;
          }
          total = total - 29 - bit;
        }
        if (isEnd) break;
      }
      lunarYear = 1921 + m;
      lunarMonth = k - n + 1;
      lunarDay = total;
      if (k == 12) {
        if (lunarMonth == Math.floor(lunar.calendar[m] / 0x10000) + 1) {
          lunarMonth = 1 - lunarMonth;
        }
        if (lunarMonth > Math.floor(lunar.calendar[m] / 0x10000) + 1) {
          lunarMonth--;
        }
      }

      return {
        lunarYear: lunarYear,
        lunarMonth: lunarMonth,
        lunarDay: lunarDay,
      };
    }
  }
}
</script>

<style scoped>
.wrap {
  font-size: 16px;
  background-color: rgb(241, 242, 249);
  color: #555;
  padding-bottom: 50px;
}

.top-banner {
  background: url(../../assets/images/classicInput/banner1.png) no-repeat;
  height: 120px;
  background-size: 100% 120px;
  width: 100%;
  background-position: center;
}

.step {
  padding: 25px 0;
}

.step .active {
  color: rgb(56, 81, 210);
}

.step span {
  color: #888;
}

.c-content {
  border-radius: 10px;
  background-color: #fff;
  padding: 20px;
}

.icon-wrap {
  width: 100px;
  overflow: hidden;
  height: 100px;
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.icon-wrap .icon {
  width: 100%;
  min-height: 100%;
}

.icon-wrap .choose {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 30px;
}

.sex-box .col-grid {
  text-align: center;
}

.sex-box .col-grid .sex {
  margin-top: 15px;
}

.sex-box .col-grid .sex.active {
  color: rgb(65, 81, 210);
}

.sumbit-btn {
  color: #fff;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
  width: 300px;
  background-color: rgb(56, 81, 210);
}
.input {
  width: 100px;
}
.w-202 {
  width: 202px;
}
@media screen and (max-width: 450px) {
  .userSignForm {
    padding-top: 10px;
  }
  .el-form-item__label {
    width: 100px !important;
  }
  .sumbit-btn {
    margin-left: 0;
  }
  .w-100 {
    width: 100% !important;
  }
  .top-banner {
    background: url(../../assets/images/haibao/speacil-phone.png) no-repeat;
    background-size: 100% 120px;
    height: 120px;
    width: 100%;
    background-position: center;
  }
}
</style>
